<template>
  <div class="goods" @click="goodsDetail" :style="styleData" :data-id="item.id">
    <div class="order-num" v-if="showOrderNum"><img :src="orderPic" alt /></div>
    <div class="picture"><img v-lazy="{src:item.img640,loading:lazyPic}" alt=""></div>
    <div class="base-info">
      <div class="saled">直降{{parseInt(item.cut)}}元</div>
      <div class="title">{{item.name}}</div>
      <div class="price"><span class="curr"><i>￥</i><em>{{parseInt(item.price)}}</em></span></div>
      <div class="btn">立即购买 &gt;</div>
    </div>
  </div>
  <!-- <div data-v-eae200fe data-v-ad03b6de class="goods" style="margin: 0.45rem auto 0px;">
    <div data-v-eae200fe class="picture">
      <img src="//img30.360buyimg.com/babel/s170x180_jfs/t28648/179/63691475/75477/f38cc744/5be6a4f7N6a040b4e.jpg!q90!cc_170x180"/>
    </div>
    <div class="base-info">
      <div class="saled">已售888件</div>
      <div class="title">耐克官网男鞋x sacai联名走秀款解构红蓝黄绿跑步女鞋AA3833-002</div>
      <div class="price"><span class="curr"><i>￥</i><em>599.00</em></span></div>
      <div class="btn">立即购买 &gt;</div> 
    </div>
  </div> -->
</template>

<script>
export default {
  props: ["parentData", "styleData", "orderNum"],
  data() {
    return {
      item: {},
      showOrderNum: false,
      orderPic: "",
      orderPicArr: [
        require("../../assets/img/rankList/rankList09.png"),
        require("../../assets/img/rankList/rankList10.png"),
        require("../../assets/img/rankList/rankList11.png")
      ],
      lazyPic: require("../../assets/img/publicImg/loading_default.png")
    };
  },
  created() {
    this.showOrderNum = this.orderNum.showNum;
    if (this.orderNum.index == 0) {
      this.orderPic = this.orderPicArr[0];
    } else if (this.orderNum.index == 1) {
      this.orderPic = this.orderPicArr[1];
    } else if (this.orderNum.index == 2) {
      this.orderPic = this.orderPicArr[2];
    }
    this.item = this.parentData;
  },
  methods: {
    goodsDetail() {
      this.$emit("childEvent", this.item.id);
    }
  }
};
</script>

<style lang="less" scoped>
.goods {
  width: 6.3rem;
  height: 2.6rem;
  padding: 0.1rem;
  margin-right: 0.1rem;
  margin-bottom: 0.12rem;
  font-family: "微软雅黑";
  background: #fff;
  font-size: 0.3rem;
  box-sizing: border-box;
  position: relative;
  .order-num {
    width: 0.72rem;
    height: 1.4rem;
    position: absolute;
    top: 0rem;
    left: 0.1rem;
    z-index: 5;
  }
  .picture {
    float: left;
    width: 2.4rem;
    padding-top: 2.4rem;
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .base-info {
    float: right;
    width: 3.35rem;
    .saled {
      display: inline-block;
      margin: 0.15rem 0;
      padding: 0.1rem 0.2rem;
      font-size: 0.24rem;
      border-radius: 0.06rem;
      border: 0.02rem solid #fe4a01;
    }
  }
  .title {
    height: 0.7rem;
    line-height: 0.36rem;
    overflow: hidden;
    font-size: 0.24rem;
  }
  .price {
    line-height: 0.36rem;
    padding-top: 0.45rem;
    font-size: 0.32rem;
    color: #000;
    i,
    em,
    del {
      font-style: normal;
    }
    .curr {
      font-weight: 700;
      i {
        font-size: 0.2rem;
      }
    }
    .prev {
      color: #999999;
      font-size: 0.24rem;
    }
  }
  .btn {
    width: 1.45rem;
    height: 0.5rem;
    color: #fff;
    border-radius: 0.06rem;
    line-height: 0.5rem;
    font-size: 0.24rem;
    text-align: center;
    position: absolute;
    bottom: 0.15rem;
    right: 0.15rem;
    background: #fe4a01;
  }
}
</style>